<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>美食排行榜</p>
    </header>
    <!-- 返回按钮 -->
    <div class="back-button" @click="goBack">
      <i class="fa fa-arrow-left"></i>
      <!-- 使用 Font Awesome 图标 -->
    </div>
    <!-- 食品列表部分 -->
    <ul class="food">
      <li v-for="item in foodList" :key="item.foodId"  >
        <div class="food-left">
          <img :src="item.foodImg" />
          <div class="food-left-info">
            <h3>{{item.foodName }}</h3>
            <p>{{ item.foodExplain }}</p>
            <p>&#165;{{item.foodPrice }}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
        levelId: this.$route.query.levelId,
        foodList: [],
        user: JSON.parse(sessionStorage.getItem("user")) //当前登录的用户信息
      };
    },
    mounted() {
      //根据levelid升序显示食品列表信息
      this.getFoodListByLevelId();
    },
    methods: {
      // 返回上一页
      goBack() {
        this.$router.go(-1);
      },
     
      //根据levelid升序显示食品列表信息
      async getFoodListByLevelId() {
        //console.log(this.levelId)
        //   alert("根据levelid升序显示食品列表信息" + this.levelId);
        await this.$http
          .get("/food/listFoodByLevelId", {
            params: {
              levelId:this.levelId
            }
          })
          .then(res => {
            //console.log(this.levelId)
            this.foodList = res.data.object;
           
          });
      }
      
    }
  };
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}
 /****************** 食品列表部分 ******************/
 .wrapper .food {
  width: 100%;
  margin-top: 12vw;
  /*使用下外边距避开footer部分*/
  padding-bottom: 28vw;
}
.wrapper .food li {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  user-select: none;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .food li .food-left {
  display: flex;
  align-items: center;
}
.wrapper .food li .food-left img {
  width: 20vw;
  height: 20vw;
}
.wrapper .food li .food-left .food-left-info {
  margin-left: 3vw;
}
.wrapper .food li .food-left .food-left-info h3 {
  font-size: 3.8vw;
  color: #555;
}
.wrapper .food li .food-left .food-left-info p {
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}
.wrapper .food li .food-right {
  width: 16vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .food li .food-right .fa-minus-circle {
  font-size: 5.5vw;
  color: #999;
  cursor: pointer;
}
.wrapper .food li .food-right p {
  font-size: 3.6vw;
  color: #333;
}
.wrapper .food li .food-right .fa-plus-circle {
  font-size: 5.5vw;
  color: #0097ef;
  cursor: pointer;
}
/****************** 商家列表部分 ******************/
.wrapper .business {
  width: 100%;
  margin-top: 12vw;
  padding-bottom: 14vw;
}
.wrapper .business li {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border-bottom: solid 1px #ddd;
  user-select: none;
  cursor: pointer;

  display: flex;
  align-items: center;
}
.wrapper .business li .business-img {
  /*这里设置为相当定位，成为business-img-quantity元素的父元素*/
  position: relative;
}
.wrapper .business li .business-img img {
  width: 20vw;
  height: 20vw;
}
.wrapper .business li .business-img .business-img-quantity {
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;

  display: flex;
  justify-content: center;
  align-items: center;

  /*设置成绝对定位，不占文档流空间*/
  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}
.wrapper .business li .business-info {
  margin-left: 3vw;
}
.wrapper .business li .business-info h3 {
  font-size: 3.8vw;
  color: #555;
}
.wrapper .business li .business-info p {
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}
.back-button {
  position: fixed;
  top: 5vw; /* 根据需要调整高度 */
  left: 4vw; /* 给左边留出一定间距 */
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 4vw;
  z-index: 1000;
}
</style>
